<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 顶部title -->
      <page-tool>
        <!-- 左边 -->
        <template #before>
          <span>共{{ page.total }}条数据</span>
        </template>
        <!-- 右边 -->
        <template #after>
          <el-button type="danger" size="small" @click="onExport">员工导出</el-button>
          <el-button type="success" size="small" @click="$router.push('/import')">员工导入</el-button>
          <el-button type="primary" size="small" @click="addEmpDialogVisible = true">新增员工</el-button>
        </template>
      </page-tool>
      <el-card>
        <el-table :data="list">
          <el-table-column label="序号" type="index"></el-table-column>
          <el-table-column label="姓名" prop="username" :sortable="true"></el-table-column>
          <el-table-column label="头像" prop="staffPhoto" :sortable="true">
            <template v-slot="{row}">
              <img
                v-imgerror="require('@/assets/common/head.jpg')"
                :src="row.staffPhoto"
                style="width:100px;height:100px"
                @click="onOpenDialog(row.staffPhoto || require('@/assets/common/head.jpg'))"
              >
            </template>
          </el-table-column>
          <el-table-column label="手机号" prop="mobile" :sortable="true"></el-table-column>
          <el-table-column label="工号" prop="workNumber" :sortable="true"></el-table-column>
          <el-table-column label="聘用形式" prop="formOfEmployment" :sortable="true">
            <template v-slot="{row}">
              {{ row.formOfEmployment | formatHireType }}
            </template>
          </el-table-column>
          <el-table-column label="部门" prop="departmentName" :sortable="true"></el-table-column>
          <el-table-column label="入职时间" prop="timeOfEntry" :sortable="true">
            <template v-slot="{row}">
              {{ row.timeOfEntry | formatTime }}
            </template>
          </el-table-column>
          <el-table-column label="账号状态" prop="enableState" :sortable="true">
            <template v-slot="{row}">
              <!-- v-bind="变量/表达式"
              v-model="变量"
              v-model是语法糖
                等效于:value="xxx" @input="xxx = $event"
              -->
              <el-switch
                v-model="row.enableState"
                active-value="1"
                inactive-value="0"
                disabled
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="260px">
            <template v-slot="{row}">
              <el-button type="text" @click="$router.push('/employees/detail/'+row.id)">查看</el-button>
              <el-button type="text">转正</el-button>
              <el-button type="text">调岗</el-button>
              <el-button type="text">离职</el-button>
              <el-button type="text" @click="onOpenAssignRoleDialog(row.id)">角色</el-button>
              <el-button type="text" @click="onDel(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="center">
          <el-pagination
            layout="prev, pager, next"
            :total="page.total"
            :page-size="page.size"
            @current-change="onPageChange"
          >
          </el-pagination>
        </el-row>
      </el-card>
    </div>
    <!-- 图片预览弹窗 -->
    <el-dialog title="图片预览" width="50%" :visible.sync="centerDialogVisible">
      <el-row type="flex" justify="center">
        <qrcode-vue :size="200" level="H" :value="staffPhoto"></qrcode-vue>
      </el-row>
    </el-dialog>
    <!-- 新增员工弹窗 -->
    <add-emp :dialog-visible.sync="addEmpDialogVisible" @success="getEmplioyeesList"></add-emp>
    <!-- 分配角色权限弹窗 -->
    <el-dialog title="分配角色" width="50%" :visible.sync="assignRoleDialogVisible">
      <el-checkbox-group v-model="roleIds">
        <el-checkbox v-for="item in roleList" :key="item.id" :label="item.id">{{ item.name }}</el-checkbox>
      </el-checkbox-group>
      <el-row type="flex" justify="center">
        <el-button type="primary" @click="onAssignRole">确定</el-button>
        <el-button @click="assignRoleDialogVisible =false">取消</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { assignRoles, getEmplioyeesList } from '@/api/employees'
import addEmp from './components/add-emp.vue'
import QrcodeVue from 'qrcode.vue'
import { pick } from 'lodash'
import { formatHireType, formatTime } from '@/filter'
import { getRoles } from '@/api/setting'
import { delEmployee, getEmployeeInfo } from '@/api/user'

export default {
  components: { QrcodeVue, addEmp },
  props: {},
  data() {
    return {
      list: [],
      page: {
        total: 0,
        size: 10,
        page: 1
      },
      centerDialogVisible: false,
      staffPhoto: undefined,
      addEmpDialogVisible: false,
      assignRoleDialogVisible: false,
      roleList: [],
      roleIds: [],
      currentId: undefined
    }
  },

  async created() {
    this.getEmplioyeesList()
    this.roleList = (await getRoles({ page: 1, pagesize: 100 })).rows
  },
  mounted() {},
  methods: {
    onDel(id) {
      // elmecon快捷代码块
      this.$confirm('确认删除?', '提示', {
        cancelButtonText: '取消',
        confirmButtonText: '确认',
        type: 'warning'
      })
        .then(async action => {
          await delEmployee(id)
          this.$message.success('删除成功')
          this.getEmployeesList()
        })
        .catch(err => {
          console.log(err)
        })
    },
    onPageChange(page) {
      this.page.page = page
      this.getEmplioyeesList()
    },
    // 定义一个渲染函数
    async getEmplioyeesList() {
      const { rows, total } = await getEmplioyeesList(this.page)
      this.list = rows
      this.page.total = total
    },
    // 打开新增弹窗
    onOpenDialog(staffPhoto) {
      this.centerDialogVisible = true
      this.staffPhoto = staffPhoto
    },
    // 导出事件
    onExport() {
      import('@/vendor/Export2Excel').then(async excel => {
        const { rows } = await getEmplioyeesList({ page: 1, size: this.page.total })
        const data = rows.map(t => {
          t.formOfEmployment = formatHireType(t.formOfEmployment)
          t.correctionTime = formatTime(t.correctionTime, 'YYYY-MM-DD')
          t.timeOfEntry = formatTime(t.timeOfEntry, 'YYYY-MM-DD')
          return Object.values(pick(t, ['username', 'mobile', 'timeOfEntry', 'formOfEmployment', 'correctionTime', 'workNumber', 'departmentName']))
        })
        const multiHeader = [['姓名', '主要信息', '', '', '', '', '部门']]
        const merges = ['A1:A2', 'B1:F1', 'G1:G2']
        excel.export_json_to_excel({
          multiHeader,
          header: ['', '手机', '入职日期', '聘用形式', '转正日期', '工号', ''], // 表头 必填
          merges,
          data, // 具体数据 必填
          filename: 'excel-list', // 非必填
          autoWidth: true, // 非必填
          bookType: 'xlsx' // 非必填
        })
      })
    },
    // 权限函数
    async onOpenAssignRoleDialog(id) {
      const { roleIds } = await getEmployeeInfo(id)
      this.currentId = id
      if (roleIds) {
        this.roleIds = roleIds
      }
      this.assignRoleDialogVisible = true
    },
    async onAssignRole() {
      await assignRoles({
        id: this.currentId,
        roleIds: this.roleIds
      })
      this.$message.success('操作成功')
      this.assignRoleDialogVisible = false
    }
  }
}
</script>
<style lang="less" scoped></style>
